<template>
	<div class="nav-bar">
		<div class="left">
			<img width="160px" src="../assets/img/common/logo (1).png">
			<i @click="handleClick" class="el-icon-s-unfold"></i>
		</div>
		<el-menu class="el-menu-demo" mode="horizontal" background-color="#31404e" text-color="#fff"
			active-text-color="#ffd04b">
			<el-submenu index="3">
				<template slot="title">
					<el-avatar :src='userInfo.avatar'></el-avatar>
					<span class="username">{{userInfo.username}}</span>
				</template>
				<el-menu-item index="/user/info">账户设置</el-menu-item>
				<el-menu-item index="2-2">消息通知</el-menu-item>
				<el-menu-item @click='handleLogout'>推出登录</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
	import { mapState,mapMutations } from 'vuex';
	
	export default {
		computed: {
			...mapState('account', { userInfo: 'info' })
		},
		created() {
			let id = sessionStorage.id;
			//请求资料
			this.$store.dispatch('account/loadInfo', id);
		},
		methods: {
			handleLogout() {
				sessionStorage.clear();
				this.$router.replace('/login');
			},
			...mapMutations('menu',['handleClick'])
		}
	}
</script>

<style lang="less">
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #31404e;

		.left {
			display: flex;
			align-items: center;
			.el-icon-s-unfold {
				color: #ffffff;
			}
		}
		.el-menu-demo.el-menu--horizontal.el-menu{
			border: none;
		}
	}
	.username{
		padding: 0 10px;
	}
	
</style>
